<template>
  <view>
    <!-- 使用自定义搜索组件 传参自定义背景和圆角 -->
    <!-- <my-search :bgcolor="'pink'" ></my-search> -->
    <!-- 类似于单击之类的事件在自定义组件中没有被封装 需要组件自己调用一下 -->
    <my-search @click="gotoSearch"></my-search>

    <view class="scroll-view-container">
      <!-- 左侧滑动区 -->
      <scroll-view class="left-scroll-view" scroll-y="true" :style="{ height: wh + 'px' }">
        <block v-for="(item, i) in cateList" :key="i">
          <!-- 动态绑定class类名 用三元运算符绑定默认项索引 -->
          <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">{{ item.cat_name }}</view>
        </block>
      </scroll-view>
      <!-- 右侧滑动区 -->
      <scroll-view class="right-scroll-view" scroll-y="true" :style="{ height: wh + 'px' }" :scroll-top="scrollTop">
        <!-- 二级分类列表 -->
        <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2">
          <view class="cate-lv2-title">/ {{ item2.cat_name }} /</view>
          <!-- 三级分类列表  v-for="(item3, i3) in cateLevel3" 直接这样循环会导致后面错误-->
          <view class="cate-lv3">
            <view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)">
              <image :src="item3.cat_icon" mode="widthFix"></image>
              <text>{{ item3.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前设备可用的高度
      wh: 0,
      // 左侧导航栏数据
      cateList: [],
      // 默认激活项 当索引等于当前项的索引 则表示激活
      active: 0,
      // 二级分类列表数据
      cateLevel2: [],
      // 三级分类列表数据 错误写法
      // cateLevel3: []

      // 右侧页面切换时的scrollTop 保证每次切换都在顶部 而不是保留上个页面留下的位置
      scrollTop: 0
    };
  },
  onLoad() {
    // 调用该方法得到当前手机模型的内容高度
    const sysInfo = uni.getSystemInfoSync();
    // console.log(sysInfo);  -50是搜索栏高度
    this.wh = sysInfo.windowHeight - 50;

    // 调用getCateList方法
    this.getCateList();
  },
  methods: {
    // 发送左侧导航栏请求
    async getCateList() {
      const { data: res } = await uni.$http.get('/api/public/v1/categories');
      // console.log(res);
      // 请求失败时
      if (res.meta.status !== 200) return uni.$showMsg();
      // 请求成功 把数据赋值给cateList
      this.cateList = res.message;
      // 为右侧二级分类赋值 message是数组 当前是把首页(索引为0)的数据赋值 后续切换导航栏时 复制的索引也要跟着改变
      this.cateLevel2 = res.message[0].children;
      // 同理 赋值三级列表数据 !该写法不对
      // this.cateLevel3 = this.cateLevel2[0].children
    },
    // 激活项改变的点击事件
    activeChanged(i) {
      // console.log(i);
      // 把获取到的当前项的索引赋值给active
      this.active = i;
      // 动态把当前页面的二级分类数据赋值给cateLevel2 这里拿不到res 但可以用cateList
      this.cateLevel2 = this.cateList[i].children;
      // 动态赋值三级列表 报错：原因：cateLevel2里面有的只有2，3个数据，而索引i可能大于二级列表的长度 所以报错
      // 上面二级列表赋值不会出事是因为索引本就根据主列表变的 主列表无论多少索引都不会超过其长度 所以永远可以获取到children
      // 随着主页表的索引变大 二级列表的长度不一定有索引值大 所以报错
      // this.cateLevel3 = this.cateLevel2[i].children

      // 每次切换 重新赋值 然而赋值如果与原值相同是没有效果的 所以可以在1/0之间转换 用户不会有偏差感
      this.scrollTop = this.scrollTop === 0 ? 0.0001 : 0;
    },
    gotoGoodsList(item) {
      uni.navigateTo({
        url: '/subpkg/goods_list/goods_list?cid=' + item.cat_id
      });
    },
    // 自定义事件
    gotoSearch() {
      uni.navigateTo({
        url: '/subpkg/search/search'
      });
    }
  }
};
</script>

<style lang="scss">
.scroll-view-container {
  display: flex;
  .left-scroll-view {
    // 需要固定宽度时 不必用rpx
    width: 120px;
    .left-scroll-view-item {
      background-color: #f7f7f7;
      line-height: 60px;
      text-align: center;
      font-size: 12px;
      // 表示同时还拥有active类名
      &.active {
        background-color: #fff;
        position: relative;
        &::before {
          content: '';
          display: block;
          width: 3px;
          height: 30px;
          background-color: #c00000;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }
    }
  }
}
.cate-lv2-title {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
}
.cate-lv3 {
  display: flex;
  flex-wrap: wrap;
  .cate-lv3-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    width: 33.333%;
    image {
      width: 60px;
      height: 60px;
    }
    text {
      font-size: 12px;
    }
  }
}
.right-scroll-view {
  background-color: #fff;
}
</style>
